﻿@page "/drag-and-drop"

<link id="theme-style" rel="stylesheet" href="_content/AIStudio.BlazorDiagram/css/diagram.css">

<div class="wrapper">
    <CascadingValue Value="Diagram">
        <div class="toolbar">
            <div class="text-center" draggable="true" @ondragstart='() => OnDragStart("0")'>
                <img class="d-block m-auto" src="_content/AIStudio.BlazorDiagram/img/DefaultNodeWidget.png" />
                <span>Default Node</span>
            </div>
            <div class="text-center" draggable="true" @ondragstart='() => OnDragStart("1")'>
                <img class="d-block m-auto" src="_content/AIStudio.BlazorDiagram/img/BotAnswerNodeWidget.png" />
                <span>Bot Answer Node</span>
            </div>
            <div class="default-node" style="width:80px;height:60px;margin:10px" draggable="true" @ondragstart='() => OnDragStart(AIStudio.Util.DiagramEntity.NodeKinds.Start.ToString())'>
                <span>开始</span>
            </div>
            <div class="default-node" style="width:80px;height:60px;margin:10px" draggable="true" @ondragstart='() => OnDragStart(AIStudio.Util.DiagramEntity.NodeKinds.End.ToString())'>
                <span>结束</span>
            </div>
            <div class="default-node" style="width:80px;height:60px;margin:10px;border-radius:30px" draggable="true" @ondragstart='() => OnDragStart(AIStudio.Util.DiagramEntity.NodeKinds.Middle.ToString())'>
                <span>中间节点</span>
            </div>   
            <div class="default-node" style="width:80px;height:60px;margin:10px" draggable="true" @ondragstart='() => OnDragStart(AIStudio.Util.DiagramEntity.NodeKinds.Decide.ToString())'>
                <span>条件节点</span>
            </div>
            <div class="default-node" style="width:80px;height:60px;margin:10px" draggable="true" @ondragstart='() => OnDragStart(AIStudio.Util.DiagramEntity.NodeKinds.COBegin.ToString())'>
                <span>并行开始</span>
            </div>
            <div class="default-node" style="width:80px;height:60px;margin:10px" draggable="true" @ondragstart='() => OnDragStart(AIStudio.Util.DiagramEntity.NodeKinds.COEnd.ToString())'>
                <span>并行结束</span>
            </div>
            <div class="text-center">
                <button class="btn-primary" style="width:80px;height:60px;margin:10px;border-radius:10px;" @onclick="ShowJson">Show JSON</button>
            </div>
            <div class="text-center">
                <input id="name" style="width:80px;height:60px;margin:10px;border-radius:10px;" @bind="JsonString" />
            </div>
            <div class="text-center">
                <button class="btn-primary" style="width:80px;height:60px;margin:10px;border-radius:10px;" @onclick="LoadJson">Load JSON</button>
            </div>
        </div>
        <div class="diagram-container" ondragover="event.preventDefault();" @ondragover:preventDefault @ondrop="OnDrop">
            <DiagramCanvas></DiagramCanvas>
        </div>
        <FlowchartProperty></FlowchartProperty>
    </CascadingValue>
</div>
